<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      #scrollBox {
          height: 200px;
          width: 400px;
          background: #999999;
          overflow: auto;
      }

      .box {
          height: 200px;
          width: 200px;
          border: 1px solid green;
      }
  </style>
</head>
<body>
<div id="scrollBox">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div id="targetBox" class="box"></div>
</div>
<script>
    window.onload = function () {
        const scrollBox = document.getElementById('scrollBox')
        const targetBox = document.getElementById('targetBox')

        const callback = (entries, target) => {
            entries.forEach(entry => {
                console.log('entry', entry)
            })
        }

        window.observer = new IntersectionObserver(callback, {
            root: scrollBox,
            threshold: 1
        })

        observer.observe(targetBox)
    }
</script>
</body>
</html>
